<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据仪表盘</title>
  <style>
    /* 背景网格层样式 */
    .grid-background {
      background-image: radial-gradient(var(--color-primary) 0.5px, transparent 0.5px);
      background-size: 20px 20px;
      background-color: var(--color-bg-primary);
      opacity: 0.95;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    /* 卡片悬停效果 */
    .data-card {
      transition: all 0.2s ease;
      border: 1px solid rgba(59, 130, 246, 0.4);
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
    }
    
    .data-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    }
    
    /* 按钮反馈效果 */
    .btn {
      transition: background-color 0.3s ease;
    }
    
    /* 微妙动画 */
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }
    
    .animate-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  </style>
</head>
<body>
  <!-- 背景网格层 -->
  <article class="grid-background"></article>
  
  <!-- 主要内容层 -->
  <section class="container mx-auto px-6 py-8" id="main-content">
    <!-- 页面标题区 -->
    <header class="mb-8">
      <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">数据仪表盘</h1>
    </header>
    
    <!-- 主内容区 -->
    <main class="space-y-8">
      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 用户总数 -->
        <div class="data-card rounded-3xl p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">用户总数</p>
              <h3 class="text-2xl font-bold text-gray-800" id="userCount">0</h3>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <span class="text-blue-600">👥</span>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-sm text-green-600 flex items-center">
              <span class="mr-1">↑</span> 12.5%
              <span class="text-gray-500 ml-2">较上月</span>
            </p>
          </div>
        </div>

        <!-- 访问量 -->
        <div class="data-card rounded-3xl p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">访问量</p>
              <h3 class="text-2xl font-bold text-gray-800" id="visitCount">0</h3>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
              <span class="text-green-600">📊</span>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-sm text-red-600 flex items-center">
              <span class="mr-1">↓</span> 2.3%
              <span class="text-gray-500 ml-2">较上月</span>
            </p>
          </div>
        </div>

        <!-- 订单总数 -->
        <div class="data-card rounded-3xl p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">订单总数</p>
              <h3 class="text-2xl font-bold text-gray-800" id="orderCount">0</h3>
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
              <span class="text-yellow-600">🛒</span>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-sm text-green-600 flex items-center">
              <span class="mr-1">↑</span> 8.7%
              <span class="text-gray-500 ml-2">较上月</span>
            </p>
          </div>
        </div>

        <!-- 总收入 -->
        <div class="data-card rounded-3xl p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">总收入</p>
              <h3 class="text-2xl font-bold text-gray-800" id="totalRevenue">¥0</h3>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
              <span class="text-purple-600">💰</span>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-sm text-green-600 flex items-center">
              <span class="mr-1">↑</span> 15.2%
              <span class="text-gray-500 ml-2">较上月</span>
            </p>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 折线图 -->
        <div class="data-card rounded-3xl p-6 lg:col-span-2">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">月度趋势</h2>
          <div class="h-80 bg-gray-50 rounded-xl flex items-center justify-center">
            <p class="text-gray-500">图表占位区域</p>
          </div>
        </div>

        <!-- 饼图 -->
        <div class="data-card rounded-3xl p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">用户分布</h2>
          <div class="h-80 bg-gray-50 rounded-xl flex items-center justify-center">
            <p class="text-gray-500">图表占位区域</p>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="data-card rounded-3xl p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">最近订单</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead>
              <tr>
                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
              </tr>
            </thead>
            <tbody id="orderTable" class="bg-white divide-y divide-gray-200">
              <!-- 表格数据将通过JavaScript动态生成 -->
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </section>

  <script type="module" src="./src/main.ts"></script>
  <script>
    // 初始化应用
    function initApp() {
      // 设置动态高度
      setDynamicHeight();
      
      // 从localStorage获取数据或生成模拟数据
      const dashboardData = getDashboardData();
      
      // 添加延迟效果，模拟真实数据加载
      setTimeout(function() {
        // 更新统计数据
        updateStatistics(dashboardData);
        
        // 渲染订单表格
        renderOrderTable(dashboardData.orders);
      }, 1000);
    }

    // 设置动态高度
    function setDynamicHeight() {
      try {
        const mainContent = document.getElementById('main-content');
        const windowHeight = window.innerHeight;
        const headerHeight = document.querySelector('header').offsetHeight;
        const paddingTop = parseInt(getComputedStyle(mainContent).paddingTop);
        const paddingBottom = parseInt(getComputedStyle(mainContent).paddingBottom);
        
        // 计算主内容区的最小高度
        const minHeight = windowHeight - paddingTop - paddingBottom;
        mainContent.style.minHeight = minHeight + 'px';
      } catch (error) {
        console.error('Error setting dynamic height:', error);
        // 降级方案
        const mainContent = document.getElementById('main-content');
        mainContent.style.minHeight = '800px';
      }
    }

    // 从localStorage获取数据或生成模拟数据
    function getDashboardData() {
      try {
        const savedData = localStorage.getItem('demo_dashboardData');
        if (savedData) {
          return JSON.parse(savedData);
        }
      } catch (error) {
        console.error('Error reading data from localStorage:', error);
      }
      
      // 生成模拟数据
      const mockData = generateMockData();
      
      // 保存到localStorage
      try {
        localStorage.setItem('demo_dashboardData', JSON.stringify(mockData));
      } catch (error) {
        console.error('Error saving data to localStorage:', error);
      }
      
      return mockData;
    }

    // 生成模拟数据
    function generateMockData() {
      return {
        userCount: 12548,
        visitCount: 342100,
        orderCount: 8923,
        totalRevenue: 2854300,
        orders: Array.from({ length: 10 }, function(_, i) {
          return {
            id: 'ORD-' + (1000 + i),
            customer: '客户' + (i + 1),
            amount: Math.floor(Math.random() * 10000) + 1000,
            status: ['已完成', '待处理', '已发货', '已取消'][Math.floor(Math.random() * 4)],
            date: new Date(Date.now() - Math.floor(Math.random() * 30 * 24 * 60 * 60 * 1000)).toLocaleDateString()
          };
        })
      };
    }

    // 更新统计数据
    function updateStatistics(data) {
      document.getElementById('userCount').textContent = data.userCount.toLocaleString();
      document.getElementById('visitCount').textContent = data.visitCount.toLocaleString();
      document.getElementById('orderCount').textContent = data.orderCount.toLocaleString();
      document.getElementById('totalRevenue').textContent = '¥' + data.totalRevenue.toLocaleString();
    }

    // 渲染订单表格
    function renderOrderTable(orders) {
      const tableBody = document.getElementById('orderTable');
      tableBody.innerHTML = '';
      
      orders.forEach(function(order) {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50';
        
        row.innerHTML = '<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">' + order.id + '</td><td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">' + order.customer + '</td><td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥' + order.amount.toLocaleString() + '</td><td class="px-6 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ' + getStatusColor(order.status) + '">' + order.status + '</span></td><td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">' + order.date + '</td>';
        
        tableBody.appendChild(row);
      });
    }

    // 获取状态对应的颜色类
    function getStatusColor(status) {
      switch (status) {
        case '已完成':
          return 'bg-green-100 text-green-800';
        case '待处理':
          return 'bg-yellow-100 text-yellow-800';
        case '已发货':
          return 'bg-blue-100 text-blue-800';
        case '已取消':
          return 'bg-red-100 text-red-800';
        default:
          return 'bg-gray-100 text-gray-800';
      }
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', initApp);
    
    // 窗口大小变化时重新设置高度
    window.addEventListener('resize', setDynamicHeight);
  </script>
</body>
</html>